<template>
  <div class="message-management">
    <div class="page-header">
      <h2>常见问题管理</h2>
      <el-button type="primary" @click="openCreateDialog">新建FAQ</el-button>
    </div>
    
    <el-card shadow="never" class="message-list-card">
      <el-table 
        :data="faqList" 
        style="width: 100%" 
        v-loading="loading"
        border
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="question" label="问题" />
        <el-table-column prop="answer" label="答案" />
        <el-table-column prop="sort_order" label="排序" width="100" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button
              type="warning"
              size="small"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新建对话框 -->
    <el-dialog v-model="createDialogVisible" title="新建FAQ">
      <el-form :model="newFaq">
        <el-form-item label="问题" required>
          <el-input v-model="newFaq.question" />
        </el-form-item>
        <el-form-item label="答案" required>
          <el-input v-model="newFaq.answer" type="textarea" :rows="5" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="newFaq.sort_order" :min="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="createDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmCreate">创建</el-button>
      </template>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑FAQ">
      <el-form :model="currentFaq">
        <el-form-item label="问题" required>
          <el-input v-model="currentFaq.question" />
        </el-form-item>
        <el-form-item label="答案" required>
          <el-input v-model="currentFaq.answer" type="textarea" :rows="5" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="currentFaq.sort_order" :min="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getAllFAQ, createFAQ, editFAQ, deleteFAQ } from '@/api/faq'

const loading = ref(false)
const faqList = ref([])
const createDialogVisible = ref(false)
const editDialogVisible = ref(false)

const newFaq = ref({
  question: '',
  answer: '',
  sort_order: 0  // 保持下划线命名与后端@JsonProperty一致
})

const currentFaq = ref({
  id: null,
  question: '',
  answer: '',
  sort_order: 0
})

// 加载FAQ列表
const loadFAQ = async () => {
  loading.value = true
  try {
    const data = await getAllFAQ()
    faqList.value = data.sort((a, b) => a.sort_order - b.sort_order)
  } catch (error) {
    ElMessage.error('加载FAQ失败')
  } finally {
    loading.value = false
  }
}

// 新建FAQ
const openCreateDialog = () => {
  newFaq.value = { question: '', answer: '', sort_order: 0 }
  createDialogVisible.value = true
}

const confirmCreate = async () => {
  try {
    if (!newFaq.value.question || !newFaq.value.answer) {
      ElMessage.warning('请填写问题和答案')
      return
    }
    
    const success = await createFAQ(newFaq.value)
    if (success) {
      ElMessage.success('创建成功')
      await loadFAQ()
      createDialogVisible.value = false
    } else {
      ElMessage.error('创建失败')
    }
  } catch (error) {
    ElMessage.error('创建失败')
  }
}

// 编辑FAQ
const handleEdit = (row) => {
  currentFaq.value = { ...row }
  editDialogVisible.value = true
}

// 修改编辑确认方法
const confirmEdit = async () => {
  try {
    if (!currentFaq.value.question || !currentFaq.value.answer) {
      ElMessage.warning('请填写问题和答案')
      return
    }
    
    await editFAQ(currentFaq.value.id, currentFaq.value) // 拆分id和请求体
    ElMessage.success('保存成功')
    await loadFAQ()
    editDialogVisible.value = false
  } catch (error) {
    ElMessage.error('保存失败')
  }
}

// 修正删除方法参数传递
const handleDelete = async (row) => {
  try {
    await ElMessageBox.confirm('确定删除该FAQ吗？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    await deleteFAQ(row.id) // 直接传递ID参数
    ElMessage.success('删除成功')
    await loadFAQ()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

onMounted(() => {
  loadFAQ()
})
</script>